<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width" name="viewport">
    <title>学生管理系统</title>
    <!-- 引入layui css -->
    <link href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <!-- 引入layui js -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <style>
        .options {
            line-height: 40px;
        }
    </style>
</head>

<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">21软件0102教务系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">

            </li>
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">

            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">所有功能</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" onclick="openRight('users_2.html')" class="options"><i
                                class="layui-icon layui-icon-list" style="font-size: 18px;color: #01aaed"></i>学生信息展示页面</a>
                        </dd>
                        <dd><a href="javascript:;" onclick="openRight1('Sign_student.html')" class="options"><i
                                class="layui-icon layui-icon-time"
                                style="font-size: 18px;color: #01aaed"></i>课堂签到</a></dd>
                        <dd><a href="javascript:;" onclick="openRight2('Rob_student.html')" class="options"><i
                                class="layui-icon layui-icon-dialogue" style="font-size: 18px;color: #01aaed"></i>课堂抢答</a>
                        </dd>
                        <dd><a href="javascript:;" onclick="openPersonalPage('PersonalPage.html')" class="options">
                            <i class="layui-icon layui-icon-user" style="font-size: 18px;color: #01aaed"></i>个人主页
                        </a></dd>
                        <dd><a href="javascript:; " onclick="logOut()" class="options">
                            <i class="layui-icon layui-icon-logout" style="font-size: 18px;color: red"></i>退出登录
                        </a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body" id="main">
        <!-- 内容主体区域 -->
        <!--            <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>-->
    </div>
</div>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element,
            layer = layui.layer,
            util = layui.util,
            $ = layui.$;
        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {
                    icon: 0
                });
            },
            menuRight: function () {
                layer.open({
                    type: 1,
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', //右上角
                    anim: 5,
                    shadeClose: true
                });
            }
        });
    });
    //页面加载完成后执行
    window.onload = () => {
        $.ajax({
                url: '/user/userStatus',
                method: 'get',
                async: false,
                success: (data) => {
                    let currentPage = Number.parseInt(data.currentPage);
                    switch (currentPage) {
                        case 0 : {
                            $("#main").load("/pages/Welcome.html");
                            break;
                        }
                        case 1 : {
                            $("#main").load("/pages/users_2.html");
                            break;
                        }
                        case 2 : {
                            $("#main").load("/pages/Sign_student.html");
                            break;
                        }
                        case 3 : {
                            $("#main").load("/pages/Rob_student.html");
                            break;
                        }
                        case 4 : {
                            $("#main").load("/pages/PersonalPage.html");
                            break;
                        }
                    }
                }
            }
        )
    }

    function openRight(url) {
        $.ajax({
                url: '/user/userStatus',
                method: 'get',
                data: {"currentPage": 1},
                success: () => {
                    $("#main").load(url)
                }
            }
        )

    }

    function openRight1(url) {
        $.ajax({
                url: '/user/userStatus',
                method: 'get',
                data: {"currentPage": 2},
                success: () => {
                    $("#main").load(url)
                }
            }
        )
    }

    function openRight2(url) {
        $.ajax({
                url: '/user/userStatus',
                method: 'get',
                data: {"currentPage": 3},
                success: () => {
                    $("#main").load(url)
                }
            }
        )
    }

    function openPersonalPage(url) {
        $.ajax({
                url: '/user/userStatus',
                method: 'get',
                data: {"currentPage": 4},
                success: () => {
                    $("#main").load(url)
                }
            }
        )
    }

    function logOut() {
        if (confirm("是否退出登录？")) {
            $.ajax({
                url: '/user/logOut',
                method: 'get',
                success: function () {
                    window.location.href = '/';
                }
            })
        }
    }

</script>
</body>

</html>